<template>
  <div class="box">
    <el-dialog
      :visible.sync="JointSelection.dialogWorkOrder"
      title="选择地址"
      class="workOrderClass"
      width="640px"
    >
      <el-form>
        <el-form-item label="选择地址" style="margin-bottom: 200px;">
          <el-cascader
            v-model.trim="massageVal"
            ref="cascaderAddr"
            @change="handleChange"
            clearable
            :props="{
               lazy: true,
               lazyLoad: lazyLoadAdd 
            }"
          ></el-cascader>
        </el-form-item>
        <el-form-item style="margin-bottom:0;text-align:right">
          <el-button style="padding:8px 15px" @click="handStart">取消</el-button>
          <el-button style="padding:8px 15px" type="primary" @click="handStart">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { linkageCity } from '@/utils/linkageCity.js'
import { getUrl } from '@/utils/getUrl.js'
export default {
  props: ['JointSelection'],
  data: function() {
    return {
      massageVal: '',
      cityVal: '',
      xqbm: '',
      xqbmArr: []
    }
  },
  //   watch: {
  //     ping: {
  //       // 正确给 cData 赋值的 方法
  //       deep: true,
  //       handler: function(newVal, oldVal) {
  //         if (newVal.dialogWorkOrder) {
  //           console.log(newVal)

  //           //   this.getshu(newVal)
  //         }
  //       }
  //     }
  //   },
  methods: {
    handStart: function() {
      this.$emit('guanbi', {
        type: false,
        xqbm: this.xqbm,
        xqbmArr: this.xqbmArr,
        cityVal: this.cityVal
      })
      this.massageVal = ''
    },
    // 设备安装地址级联动选择器事件
    handleChange(e) {
      let xqbm = e[e.length - 1]
      if (e[e.length - 1].length < 7) {
        xqbm = e[e.length - 1] + '00'
      }
      this.xqbmArr = e
      const arr = this.$refs.cascaderAddr.getCheckedNodes()[0].pathLabels
      let text = ''
      for (var i = 0; i < arr.length; i++) {
        text += arr[i] + '/'
        // text += arr[i]
      }
      // this.ruleForm.R_0003000a = xqbm // 行政区划编码 massageVal
      // this.ruleForm.R_00030004 = text.substr(0, text.length - 1) // 设备安装地址文字
      this.cityVal = text.substr(0, text.length - 1) // 设备安装地址
      this.xqbm = xqbm // 行政区划编码
    },
    async lazyLoadAdd(node, resolve) {
      const user = JSON.parse(getUrl('userconter'))
      if (node.level === 0) {
        return resolve(await linkageCity(user.id, node.level + 1))
      } else if (node.level === 1) {
        return resolve(await linkageCity(user.id, node.level + 1, node.value))
      } else if (node.level === 2) {
        return resolve(await linkageCity(user.id, node.level + 1, node.value))
      } else if (node.level === 3) {
        return resolve(await linkageCity(user.id, node.level + 1, node.value, node.label))
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
